<template>
  <swiper @swiper="onSwiper" @slideChange="onSlideChange" v-bind="config">
    <swiper-slide v-for="(item, index) in slideList" :key="index" :style="styleOptions">
      <slot :obj="item"></slot>
    </swiper-slide>
  </swiper>
</template>
<script setup lang="ts">
  import { defineProps, PropType, computed, ref } from 'vue'
  import { Swiper, SwiperSlide } from 'swiper/vue'
  import { Autoplay, Navigation, Pagination, A11y } from 'swiper/modules'

  import 'swiper/css'
  import 'swiper/css/bundle'
  import 'swiper/css/navigation'
  import 'swiper/css/pagination'
  import 'swiper/css/effect-fade'

  const props = defineProps({
    dataList: {
      type: Array as PropType<string[]>,
      require: true,
      default: () => [],
    },
    styleOptions: {
      type: Object as PropType<any>,
      require: false,
      default: () => ({}),
    },
    options: {
      type: Object as PropType<any>,
      require: false,
      default: () => ({}),
    },
  })
  const config = ref({
    slidesPerView: 1,
    spaceBetween: 50,
    autoplay: { delay: 2500, disableOnInteraction: false },
    navigation: true,
    modules: [Autoplay, Pagination, Navigation, A11y],
    pagination: { clickable: true },
    loop: true,
    centeredSlides: true,
  })
  const onSwiper = (swiper: any) => {
    console.log(swiper)
  }

  const onSlideChange = () => {
    console.log('slide change')
  }
  const slideList = computed(() => props.dataList)
</script>

<style scoped></style>
